<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs
        @change="
          (val) => {
            $router.push({ name: val })
          }
        "
        activeKey="ShopList"
      >
        <a-tab-pane key="ShopList" tab="自提点"> </a-tab-pane>
        <a-tab-pane key="shopWithdraw" tab="提现"> </a-tab-pane>
        <a-tab-pane key="ShopVerifier" tab="核销员"> </a-tab-pane>
        <a-tab-pane key="ShopVerifySetting" tab="核销设置"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper" v-if="true">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-form-item style="margin: 0">
                <a-input placeholder="请输入自提点名称" v-model="queryParam.search_key">
                  <a-icon slot="suffix" type="search" />
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons" style="margin: 0">
                <a-button style="margin-right: 8px" @click="resetQueryParams">重置</a-button>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="card_style_re">
      <div class="table-operator">
        <NoBorderRadio @onChange="onOptionChange" :options="options" :defaultValue="-2"></NoBorderRadio>
        <a-button type="primary" @click="onAdd" icon="plus" style="float: right">新建</a-button>
      </div>
      <a-divider />
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <div slot="name" slot-scope="name, item">
          <span>{{ item.name }}</span
          ><br />
          <span v-if="item.user_id > 0 && item.user_name">用户：{{ item.user_name }}</span>
        </div>
        <span slot="latitude" slot-scope="latitude, item">（{{ latitude }}， {{ item.longitude }}）</span>
        <div slot="shop_audit" slot-scope="shop_audit, item">
          <span v-if="shop_audit == -1">审核拒绝: {{ item.refuse_desc }}</span>
          <span v-if="shop_audit == 0">待审核</span>
          <span v-else>正常</span>
        </div>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="handleEdit(record)" size="small">编辑</a-button>
          <a-divider type="vertical" />
          <a-dropdown v-if="record.shop_audit == 0">
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="auditAction(record)">审核</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确认删除该自提点吗？" @confirm="handleDelete(record)">
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-popconfirm title="确认删除该自提点吗？" @confirm="handleDelete(record)" v-else>
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </s-table>
      <a-modal
        :title="isNew ? '创建自提点' : '编辑自提点'"
        :width="800"
        :confirm-loading="modalLoading"
        :mask-closable="false"
        :destroy-on-close="true"
        :bodyStyle="{ height: '600px', overflow: 'auto' }"
        v-model="visible"
        @ok="handleOk"
      >
        <a-form ref="form" class="permission-form" :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="display: none" label="主键" hasFeedback>
            <a-input placeholder="主键" :disabled="!isNew" v-decorator="['id']" />
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点名称" hasFeedback>
            <a-input
              placeholder="自提点名称"
              v-decorator="['name', { rules: [{ required: true, message: '请填写自提点名称' }] }]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系方式" hasFeedback>
            <a-input
              type="number"
              :min="11"
              :max="11"
              placeholder="联系方式"
              v-decorator="['mobile', { rules: [{ required: true, message: '请填写联系方式' }] }]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地区">
            <a-form-item>
              <Address v-model="addressInfo"></Address>
              <!-- <city-select v-model="area" :props="{ expandTrigger: 'hover' }" data-type="area"> </city-select> -->
            </a-form-item>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点经纬度">
            <a-input-search
              @search="selectMapModal"
              placeholder="选择经纬"
              :readOnly="true"
              v-decorator="['location', { rules: [{ required: true, message: '请选择经纬度' }] }]"
            >
              <a-button slot="enterButton">选择经纬</a-button>
            </a-input-search>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系地址" hasFeedback>
            <a-input
              placeholder="联系地址"
              v-decorator="['address', { rules: [{ required: true, message: '请填写联系地址' }] }]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点大图">
            <storage-select
              selectNum="1"
              type="image"
              :defaultValue="form_cover_url"
              @onOk="
                (data) => {
                  this.form_cover_url = data
                }
              "
            >
            </storage-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点小图">
            <storage-select
              selectNum="1"
              type="image"
              :defaultValue="form_pic_url"
              @onOk="
                (data) => {
                  this.form_pic_url = data
                }
              "
            >
            </storage-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点评分" extra="">
            <a-input-number placeholder="自提点评分" :min="1" :max="5" v-decorator="['score', { initialValue: 5 }]" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="营业时间" hasFeedback>
            <a-input
              placeholder="营业时间"
              v-decorator="['shop_time', { rules: [{ required: true, message: '请填写营业时间' }] }]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点介绍">
            <a-textarea
              :rows="2"
              id="content"
              v-decorator="['content', { rules: [{ required: true, message: '请输入自提点介绍' }] }]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 自提点审核 -->
      <a-modal
        title="审核自提点"
        :width="800"
        :confirm-loading="modalLoading"
        :mask-closable="false"
        :destroy-on-close="true"
        :bodyStyle="{ height: '600px', overflow: 'auto' }"
        v-model="audit_modal"
        @ok="audit_handleOk"
      >
        <a-form class="permission-form" ref="audit_form" :form="audit_form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="display: none" label="主键" hasFeedback>
            <a-input placeholder="主键" :disabled="true" v-decorator="['id——id']" />
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点名称" hasFeedback>
            {{ audit_data.name }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系方式" hasFeedback>
            {{ audit_data.mobile }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点地址">
            {{ audit_data.address }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点经度">
            {{ audit_data.longitude }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点纬度">
            {{ audit_data.latitude }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点大图">
            <img width="100px" :src="audit_data.cover_url" v-if="audit_data.cover_url" alt="" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点小图">
            <img width="100px" :src="audit_data.pic_url" v-if="audit_data.pic_url" alt="" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点评分" extra="">
            <Rate :allow-clear="false" :disabled="true" :default-value="parseInt(audit_data.score)" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="营业时间" hasFeedback>
            {{ audit_data.shop_time }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点经度">
            {{ audit_data.longitude }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点纬度">
            {{ audit_data.latitude }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="自提点介绍">
            {{ audit_data.content }}
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审核结果">
            <a-radio-group
              v-decorator="[
                'shop_audit',
                {
                  initialValue: 1,
                  getValueFromEvent: (e) => {
                    this.refuse_status = e.target.value
                    return e.target.value
                  },
                },
              ]"
            >
              <a-radio :value="1"> 通过 </a-radio>
              <a-radio :value="-1"> 未通过 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="refuse_status == -1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="拒绝原因">
            <a-textarea
              :rows="2"
              id="rule"
              v-decorator="['refuse_desc', { rules: [{ required: true, message: '请填写拒绝原因' }] }]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
      <SelectMap v-if="select_map_visiable" :value.sync="select_map_visiable" @onOk="selectMapOk"></SelectMap>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import CitySelect from '@/components/CitySelect/CitySelect'
import SelectMap from '@/components/SelectMap/SelectMap'
import { STable, Address } from '@/components'
import { Rate } from 'ant-design-vue'
import { shopList, shopDel, shopAdd, shopEdit, shopAudit } from '@/api/shop'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

const STATUS = {
  1: '显示',
  0: '不显示',
}

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '自提点',
    dataIndex: 'name',
    scopedSlots: {
      customRender: 'name',
    },
  },
  {
    title: '联系方式',
    dataIndex: 'mobile',
  },
  {
    title: '自提点地址',
    dataIndex: 'address',
  },
  {
    title: '经纬度',
    dataIndex: 'latitude',
    scopedSlots: {
      customRender: 'latitude',
    },
  },
  {
    title: '添加时间',
    dataIndex: 'created_at',
  },
  {
    title: '状态',
    dataIndex: 'shop_audit',
    scopedSlots: {
      customRender: 'shop_audit',
    },
  },
  {
    title: '操作',
    width: '150px',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  name: 'ShopList',
  components: {
    STable,
    Rate,
    CitySelect,
    SelectMap,
    NoBorderRadio,
    Address,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -2,
        },
        {
          title: '审核拒绝',
          value: -1,
        },
        {
          title: '审核通过',
          value: 1,
        },
        {
          title: '待审核',
          value: 0,
        },
      ],
      isNew: false,
      visible: false,
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      form: this.$form.createForm(this),
      audit_form: this.$form.createForm(this),
      refuse_status: 1,
      // 表头
      columns,
      modalLoading: false,
      statusSelectValue: {
        key: '1',
        label: '显示',
      },
      // 审核
      audit_modal: false,
      audit_data: {},
      type_list: [],
      form_pic_url: '',
      form_cover_url: '',
      // 查询条件参数
      queryParam: {
        search_key: null,
        shop_audit_status: '1',
      },
      area: [],
      select_map_visiable: false,
      addressInfo: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return shopList(parameter)
          .then((res) => {
            console.log('shopList', res)
            this.type_list = res.data.type_list
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
    }
  },
  filters: {
    statusFilter(key) {
      return STATUS[key]
    },
  },
  created() {},
  methods: {
    onOptionChange(val) {
      this.queryParam.shop_audit_status = val
      this.$refs.table.refresh()
    },
    changeShow(item) {
      console.log(item)
      const hide = this.$message.loading('请求中...', 0)
      shopEdit({
        key: item.id,
        is_show: item.is_show,
      })
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('操作成功！')
            this.$refs.table.refresh()
          } else {
            this.$error({
              content: res.msg,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.modalLoading = false
        })
    },
    auditAction(record) {
      this.audit_data = record
      this.refuse_status = 1
      this.audit_modal = true
    },
    selectMapOk(e) {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          location: e,
        })
      })
    },
    handleEdit(record) {
      this.isNew = false
      this.visible = true
      this.area = [record.province, record.city, record.district]
      this.form_pic_url = record.pic_url
      this.form_cover_url = record.cover_url
      this.addressInfo = {
        province_id: record.province,
        city_id: record.city,
        district_id: record.district,
      }
      record.province = parseInt(record.province || 0)
      record.city = parseInt(record.city || 0)
      record.district = parseInt(record.district || 0)
      record.business = parseInt(record.business || 0)
      record.location = record.latitude + ',' + record.longitude
      this.area = [record.province, record.city, record.district]
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(record, [
            'id',
            'name',
            'mobile',
            'address',
            'location',
            'cover_url',
            'pic_url',
            'score',
            'shop_time',
            'contact_name',
            'business',
            'content',
          ])
        )
      })
    },
    handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          return false
        }
        var location = values.location.split(',')
        Object.assign(values, {
          province: this.addressInfo.province_id,
          city: this.addressInfo.city_id,
          district: this.addressInfo.district_id,
          longitude: parseFloat(location[1]) > parseFloat(location[0]) ? location[1] : location[0],
          latitude: parseFloat(location[1]) < parseFloat(location[0]) ? location[1] : location[0],
          cover_url: this.form_cover_url,
          pic_url: this.form_pic_url,
        })
        this.modalLoading = true
        if (this.isNew) {
          shopAdd(values)
            .then((res) => {
              console.log(res)
              this.modalLoading = false
              if (res.code !== 0) {
                this.$error({
                  content: res.msg,
                })
              } else {
                this.$message.success('自提点创建成功！')
                this.visible = false
                this.$refs.table.refresh()
              }
            })
            .catch((err) => {
              this.$message.error(err.message)
              this.modalLoading = false
            })
        } else {
          shopEdit(values)
            .then((res) => {
              console.log(res)
              this.modalLoading = false
              if (res.code !== 0) {
                this.$error({
                  content: res.msg,
                })
              } else {
                this.$message.success('自提点编辑成功！')
                this.visible = false
                this.$refs.table.refresh()
              }
            })
            .catch((err) => {
              this.$message.error(err.message)
              this.modalLoading = false
            })
        }
      })
    },
    audit_handleOk(e) {
      e.preventDefault()
      this.audit_form.validateFields((err, values) => {
        if (err) {
          return false
        }
        // Object.assign(this.audit_data, values)
        values.id = this.audit_data.id
        this.modalLoading = true
        shopAudit(values)
          .then((res) => {
            console.log(res)
            this.modalLoading = false
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success('操作成功！')
              this.audit_modal = false
              this.$refs.table.refresh()
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.modalLoading = false
          })
      })
    },
    selectMapModal() {
      this.select_map_visiable = !this.select_map_visiable
    },
    onAdd: function () {
      this.isNew = true
      this.visible = true
      this.form_pic_url = ''
      this.form_cover_url = ''
    },
    handleDelete: function (record) {
      const hide = this.$message.loading('删除中...', 0)
      shopDel({
        key: record.id,
      })
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('自提点删除成功！')
            this.$refs.table.refresh()
          } else {
            this.$error({
              content: res.msg,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.modalLoading = false
        })
    },
    resetQueryParams() {
      Object.assign(this.queryParam, {
        search_key: null,
        shop_audit_status: '1',
      })
      this.$refs.table.refresh(true)
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
